<template>
    <el-row>
        <el-col :span="24">
            <el-row style="text-align: left; margin: 10px 0">
                <el-col :span="7"
                    >ID:<el-input
                        style="width: 240px"
                        placeholder="请输入ID"
                        clearable
                /></el-col>
                <el-col :span="7"
                    >标题:<el-input
                        style="width: 240px"
                        placeholder="请输入标题"
                        clearable
                /></el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="find">搜索</el-button>
                </el-col>
            </el-row>
        </el-col>
        <el-col style="text-align: left; margin: 0 0 10px 0"
            ><el-button type="primary" #default="scope" @click="add(scope)"
                >新增公益中心</el-button
            ></el-col
        >
        <el-col>
            <el-table :data="arrayList" border style="width: 80%">
                <el-table-column
                    prop="id"
                    label="ID"
                    align="center"
                    label-class-name="header"
                />
                <el-table-column
                    prop="title"
                    label="标题"
                    align="center"
                    label-class-name="header"
                />
                <el-table-column
                    prop="img"
                    label="图片"
                    align="center"
                    label-class-name="header"
                >
                    <template #default="scope">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.img"
                            :fit="fit"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="内容"
                    align="center"
                    label-class-name="header"
                />
                <el-table-column
                    prop="del"
                    label="上下架"
                    align="center"
                    label-class-name="header"
                >
                    <template #default="scope">
                        <div v-if="scope.row.del == 1" class="up">上架</div>
                        <div v-else class="down">下架</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    label-class-name="header"
                >
                    <template #default="scope">
                        <el-button type="text" @click="edit(scope)"
                            >编辑</el-button
                        >
                        <el-button type="text" @click="remove(scope)"
                            >删除</el-button
                        >
                        <el-button
                            type="text"
                            v-if="scope.row.del == 0"
                            @click="shangjia(scope)"
                            >立即上架</el-button
                        >
                        <el-button type="text" v-else @click="shangjia(scope)"
                            >立即下架</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :total="10">
            </el-pagination>
        </el-col>
        <el-dialog
            v-model="show"
            :title="title"
            width="600"
            style="text-align: left"
        >
            <BianJi
                :key="gongyi.id"
                v-if="title == '编辑'"
                :gongyi="gongyi"
                @operate="operateAction"
            ></BianJi>
            <ShanChu
                :key="gongyi.id"
                v-if="title == '提示'"
                :gongyi="gongyi"
                @delate="Delate"
            ></ShanChu>
            <XinZeng v-if="title == '新增'" @add="Add"></XinZeng>
        </el-dialog>
    </el-row>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
    import axios from 'axios'
    import qs from 'qs'
    import ShanChu from './components/ShanChu'
    import XinZeng from './components/XinZeng.vue'
    import BianJi from './components/BianJi.vue'
    let show = ref(false)
    let arrayList = ref([])
    let title = ref('')
    let gongyi = ref()
    async function start() {
        let res = await axios.get('http://localhost:8080/gongyi/select')
        console.log(res)
        arrayList.value = res.data
        console.log(arrayList)
    }
    onMounted(function () {
        start()
    })
    let shangjia = async function (scope) {
        let a = scope.row.del == 1 ? 0 : 1
        console.log(a)
        console.log(scope.row.del)
        await axios.post(
            'http://localhost:8080/gongyi/update',
            qs.stringify({
                ...scope.row,
                del: a,
                id: scope.row.id
            })
        )
        start()
    }
    const Delate = async function (data) {
        console.log(data)

        if (data) {
            await axios.post(
                'http://localhost:8080/gongyi/delete',
                qs.stringify({
                    ...data
                })
            )
            let index = arrayList.value.findIndex((item) => item.id == data.id)
            arrayList.value.splice(index, 1)
        }
        show.value = false
        start()
    }
    const Add = async function (data) {
        if (data) {
            await axios.post(
                'http://localhost:8080/gongyi/add',
                qs.stringify({
                    ...data
                })
            )
        }
        show.value = false
        start()
    }
    const operateAction = async function (data) {
        console.log(data)

        if (data) {
            await axios.post(
                'http://localhost:8080/gongyi/update',
                qs.stringify({
                    ...data
                })
            )
        }
        show.value = false
        start()
    }
    const remove = function (value) {
        console.log(value)
        title.value = '提示'
        gongyi.value = value.row

        show.value = true
    }
    const add = function () {
        show.value = true
        title.value = '新增'
    }
    const edit = function (value) {
        show.value = true
        title.value = '编辑'
        gongyi.value = value.row
    }
</script>

<style lang="less" scoped>
    .up {
        padding: 5px;
        background-color: #eafaf0;
        color: #13ce66;
        font-size: 12px;
        width: 50px;
        border: 1px solid #d7f5df;
        border-radius: 5px;
        margin: 0 auto;
    }

    .down {
        padding: 5px;
        background-color: #fceded;
        color: #ff4949;
        font-size: 12px;
        width: 50px;
        border: 1px solid #f9dbdb;
        border-radius: 5px;
        margin: 0 auto;
    }
</style>